<template>
	<view class="contianer">
		<view class="infoBg" :style="{'background': 'url('+ plyerIfo.al.picUrl +')'}"></view>
		<musicHead :title='plyerIfo.name' :icon="true" style="color: white;"/>
		<view class="content">
			<scroll-view scroll-y="true" >
				<view class="detail-play" @click="stop">
					<image :src="plyerIfo.al.picUrl" :class="{'detail-play-run': isIconPlay}"></image>
					<text class="iconfont ":class='iconPlay'></text>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-warp":style="{transform:'translateY('+ -(lyricIndex) * 82+'rpx)'}">
						<view class="detail-lyric-item" v-for="(item, index) in lyric" :key="index" :class="{active:lyricIndex + 1 == index}">{{item.lyric}}</view>
					</view>
				</view>
				<view class="detail-like">
					<view class="detail-like-head">
						喜欢这首歌的人也听
					</view>
					<view class="detail-like-list">
						<view class="detail-like-item" v-for="item in simiPlayerList" :key="item.id" @click="toPlayerMusic(item.id)">
								<view class="detail-like-item-img">
									<image :src="item.album.blurPicUrl" mode=""></image>
								</view>
								<view class="detail-like-item-info">
									<view class="detail-like-item-info-name">
										<text>
											{{item.name}}
										</text>
									</view>
									<view class="detail-like-item-info-player">
										{{item.artists[0].name}}-{{item.name}}
									</view>
								</view>
								<view class="detail-like-item-info-icon">
									<text class="iconfont icon-bofang_o"></text>
								</view>	
						</view>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">
						精彩评论
					</view>
					<view class="detail-comment-list">
						<view class="detail-comment-list-item" v-for="(item, index) in commentsPeople" :key="item.commentId">
							<view class="detail-comment-list-item-img">
								<image :src="item.user.avatarUrl" mode=""></image>
							</view>
							<view class="detail-comment-list-item-inFo">
								<view class="detail-comment-list-item-inFo-head">
									<view class="detail-comment-list-item-inFo-head-left">
										<view class="user-name">
											{{item.user.nickname}}
										</view>
										<view class="user-time">
											{{item.timeStr}}
										</view>
									</view>
									<view class="detail-comment-list-item-inFo-head-right">
										<view class="dianzanOfNumber">
											{{item.likedCount}}<text class="iconfont icon-dianzan"></text>
										</view>
						
									</view>
								</view>
								<view class="detail-comment-list-item-inFo-body">
									<text>
										{{item.content}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import'@/common/iconfont.css'
	import musicHead from "../../components/MusicHead/MusicHead.vue"
	import {plyerInfo,simiPlayer,comment,lyric,song} from "../../common/api.js"
	
	export default {
		data() {
			return {
				playerId:0,
				plyerIfo:{},
				simiPlayerList:[],
				commentsPeople:[],
				lyric:[],
				lyricIndex:0,
				songUrl : '',
				iconPlay: 'icon-zanting',
				isIconPlay: true
			}
		},
		methods: {
			toPlayerMusic(id){
				this.innerAudioContext.pause()
				uni.navigateTo({
					url:'../playerMusic/playerMusic?id=' + id
				})
			},
			format(value){
				let arr = value.split(":")
				return (Number(arr[0]*60) + Number(arr[1])).toFixed(1)
			},
			stop(){
				if(this.innerAudioContext.paused){
					this.innerAudioContext.play()
				}else{
					this.innerAudioContext.pause()
				}
			},
			// 歌词定时器
			listenLyricIndex(){
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					for(let i = 0; i < this.lyric.length; i++){
						if(this.innerAudioContext.currentTime > this.lyric[i].time && this.innerAudioContext.currentTime < this.lyric[i + 1].time){
							this.lyricIndex = i - 1
						}else if(this.innerAudioContext.currentTime > this.lyric[this.lyric.length - 1].time){
							this.lyricIndex = this.lyric.length - 1
							break
						}
					}
				},500)
			},
			clearTimer(){
				clearInterval(this.timer)
			}
			
		},
		onLoad(id) {
			this.playerId = id.id
			this.$store.commit('NEXT_ID', id.id)
			plyerInfo(this.playerId).then((res) => {
				this.plyerIfo = res[0]
			}),
			simiPlayer(this.playerId).then((res) => {
				this.simiPlayerList = res
			}),
			comment(this.playerId).then((res) => {
				this.commentsPeople = res
			}),
			// 获取歌词信息
			lyric(this.playerId).then((res) => {
				/*将获取的对象进行分解为
				{lyric:"", time:""}
				*/
				let lyric = res
				let re = /\[([^\]]+)\]([^\[]+)/g
				var result = []
				lyric.replace(re, ($0,$1,$2)=>{
					result.push({"time" :this.format($1), "lyric":$2})
				})
				// 传递最终的数组
				// 过滤歌词的"\n"因为其对歌词聚焦有影响
				this.lyric = result.filter(val =>{
					return val.lyric !== '\n'
				})
			}),
			// 获取歌曲id
			song(this.playerId).then((res) => {
				// 创建音乐播放
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				// 歌曲播放地址
				this.innerAudioContext.src = res.url;
				// 打开歌词定时器
				this.listenLyricIndex()
				// 监测音乐播放时
				this.innerAudioContext.onPlay(() => {
					this.iconPlay = 'icon-zanting'
					this.isIconPlay = true
					// 打开歌词定时器
					this.listenLyricIndex()
				});
				// 监测音乐暂停时
				this.innerAudioContext.onPause((res) => {
					this.iconPlay = 'icon-bofang'
					this.isIconPlay = false
					// 清除歌词定时器
					this.clearTimer()
				});
				// 监测音乐结束的时候
				this.innerAudioContext.onEnded(() => {
					// 获取下一首歌曲的id
					this.toPlayerMusic(this.$store.state.nextId)
				});
			})	
		},
		onUnload(){
			this.innerAudioContext.destroy()
		},
		// onHide(){
		// 	this.innerAudioContext.destroy()
		// },
		components:{musicHead}
	}
</script>

<style scoped>
.infoBg{width: 100%;height: 100vh;position: fixed;left: 0;top: 0;background-size: cover;background-position: center 0;filter: blur(10px) brightness(0.25);transform: scale(1.2);}
.detail-play{width: 580rpx;height: 580rpx;background: url(../../static/pic/bg.png);background-size: cover;margin: 214rpx auto 0 auto;position: relative;}
.detail-play image{width: 370rpx;height: 370rpx;border-radius: 50%;position: absolute;left: 0;right: 0;top:0;bottom: 0;margin: auto;animation: 10s linear move infinite;animation-play-state: paused;}
.detail-play .detail-play-run{animation-play-state: running;}
@keyframes move{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.detail-play text{width: 100rpx;height: 100rpx;font-size: 100rpx;color: white;position: absolute;left: 0;right: 0;top:0;bottom: 0;margin: auto;background:rgba(0,0,0,0.4);border-radius: 50%;}
.detail-play view{width: 230rpx;height: 380rpx;background: url(../../static/pic/needle-ab.png);position: absolute;left: 160rpx;right: 0;top: -225rpx;margin: auto;background-size: cover;}
.detail-lyric{ font-size: 32rpx; line-height: 82rpx; height: 246rpx; text-align: center;overflow: hidden; color: #6f6e73;margin: 0 30rpx;}
.detail-lyric-warp{transition: 0.5s;}
.detail-lyric-item{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.active{ height: 82rpx; color: white;}
.detail-like-head{width: 100%;height: 80rpx;padding-left: 30rpx;padding-top: 30rpx;color: white;font-size: 40rpx;}
.detail-like-list{width: 100%;padding: 30rpx;}
.detail-like-item{position: relative;width: 690rpx;height: 120rpx; margin: 30rpx 0;}
.detail-like-item-img{width: 100rpx;height: 100rpx;border-radius: 20rpx;overflow: hidden;position: absolute;left: 10rpx;}
.detail-like-item-img image{height: 100%; width: 100%;border-radius: 20rpx}
.detail-like-item-info{position: absolute;left: 130rpx;height: 100rpx;color:white;width: 470rpx;}
.detail-like-item-info-name{font-size: 30rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.detail-like-item-info-player{font-size: 26rpx;margin-top: 10rpx;color: silver;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.detail-like-item-info-icon{position: absolute;right: 0;}
.icon-bofang_o{font-size: 90rpx;color:white;}
.detail-comment{margin: 0 30rpx;}
.detail-comment-head{width: 100%; height: 80rpx;line-height: 80rpx; font-size: 40rpx; color: white;margin-bottom: 30rpx;}
.detail-comment-list{width: 100%; display: flex;flex-direction: column;}
.detail-comment-list-item{width: 100%;display: flex;margin-bottom: 30rpx;}
.detail-comment-list-item-img{width: 64rpx;height: 64rpx;overflow: hidden;border-radius: 50%;margin-right: 18rpx;}
.detail-comment-list-item-img image{width: 100%;height: 100%;}
.detail-comment-list-item-inFo{width: 580rpx;overflow: hidden;display: flex;flex-direction: column;color: white;}
.detail-comment-list-item-inFo-head{display: flex;justify-content: space-between;}
.user-time{font-size: 20rpx;margin-top: 5rpx;color: silver;margin-bottom: 5rpx;}
.detail-comment-list-item-inFo-body{border-bottom: 1px solid lightgrey;width: 100%;padding: 10rpx;}
.detail-comment-list-item-inFo-body text{overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;line-height: 50rpx;word-wrap: break-word;word-break: break-all;}
</style>
